<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--css样式引入-->
<head th:replace="blog/common::head-fragment"></head>
<body>

	<!--导航条-->
	<nav th:replace="blog/common::nav-fragment"></nav>

	<!-- /////////////////////////////////////////Header 图片上的文字-->
	<header th:replace="blog/common::page-top"></header>
	<!-- Header -->
	<div class="gradient-line clearfix">
		<div style="background: none repeat scroll 0% 0% #F69087;"></div>
		<div style="background: none repeat scroll 0% 0% #85CCB1;"></div>
		<div style="background: none repeat scroll 0% 0% #966b20;"></div>
		<div style="background: none repeat scroll 0% 0% #85A9B3;"></div>
		<div style="background: none repeat scroll 0% 0% #B0CB7A;"></div>
	</div>
	
	<!-- /////////////////////////////////////////Content -->
	<div id="page-content" class="index-page">
		<div class="container">
			<div id="main-content" class="col-md-8">
				<article th:each="blog:${allBlog}">
					<div class="art-header">
						<!--显示博客标题-->
						<a th:href="'/details/' + ${blog.getBlogId()}"><h2 th:text="${blog.getBlogTitle()}" style="text-transform: none;display: inline"></h2></a>

					</div>
					</br>
					<div class="art-content">
						<div class="col-md-7">
							<a th:href="'/details/' + ${blog.getBlogId()}"><img th:src="${blog.getBlogCoverImage()}" style="width: 800px;height: 200px;display:block;"/></a>
						</div>
						<div class="col-md-5">
							<i class="fa fa-table nav-icon" aria-hidden="true"></i><span th:text="'&nbsp&nbsp创建时间：' + ${blog.getAboutTime()}" ></span>
							<br />
							<br />
							<i class="nav-icon fa fa fa-pencil-square-o" aria-hidden="true"></i><span style="color: ghostwhite">&nbsp&nbsp作者：Aegean</span>
							<br/>
							<br/>
							<i class="fa fa-bookmark nav-icon" aria-hidden="true"></i><a th:href="'/queryForCategoryId/' + ${blog.getBlogCategoryId()}" th:text="'&nbsp&nbsp&nbsp分类：' + ${blog.getBlogCategoryName()}"></a>
							<br />
							<br />
							<i class="fa fa-tags nav-icon" aria-hidden="true"></i><span th:text="'&nbsp&nbsp标签：' + ${blog.getBlogTags()}"></span>
							<br />
							<br />
							<a th:href="'/details/' + ${blog.getBlogId()}" class="btn btn-3 f-right">更多</a>
						</div>
					</div>
				</article>
				<th:block th:if="${page == pages}">
					<p style="color: gray; font-size: 15px">--------------------------------------------------人家是有底线的哦--------------------------------------------------</p>
				</th:block>
			</div>

			<div th:replace="blog/common::side-bar"></div>
			<!--分页-->
			<div class="col-md-8">
				<nav aria-label="...">
					<ul class="pagination">
						<!--是第一页，就不可以使用上一页和首页功能-->
						<th:block th:if="${page == 1}">
							<li class="page-item disabled">
								<a class="page-link" href="javascript:return false;" aria-disabled="true">首页</a>
							</li>
							<li class="page-item disabled">
								<a class="page-link" href="javascript:return false;" aria-disabled="true">上一页</a>
							</li>
						</th:block>
						<!--不是第一页，就可以使用上一页和首页功能-->
						<th:block th:unless="${page == 1}">
							<li class="page-item">
								<a class="page-link" th:href="@{/}" tabindex="-1" aria-disabled="true">首页</a>
							</li>
							<li class="page-item">
								<a class="page-link" th:href="'/?page=' + ${page - 1}" tabindex="-1" aria-disabled="true">上一页</a>
							</li>
						</th:block>

						<th:block th:each="num:${#numbers.sequence(1,pages)}">
							<li th:class="${page == num} ? 'page-item active' : 'page-item'">
								<a class="page-link" th:href="'/?page=' + ${num}" th:text="${num}"></a></li>
						</th:block>

						<th:block th:unless="${page == pages}">
							<li class="page-item">
								<a class="page-link" th:href="'/?page=' + ${page + 1}">下一页</a>
							</li>
							<li class="page-item">
								<a class="page-link" th:href="'/?page=' + ${pages}" aria-disabled="true">尾页</a>
							</li>
						</th:block>

						<th:block th:if="${page == pages}">
							<li class="page-item disabled">
								<a class="page-link" href="javascript:return false;">下一页</a>
							</li>
							<li class="page-item disabled">
								<a class="page-link" href="javascript:return false;" aria-disabled="true">尾页</a>
							</li>
						</th:block>
					</ul>
				</nav>
			</div>
			<!--分页-->
		</div>
	</div>
	<div class="gradient-line clearfix">
		<div style="background: none repeat scroll 0% 0% #F69087;"></div>
		<div style="background: none repeat scroll 0% 0% #85CCB1;"></div>
		<div style="background: none repeat scroll 0% 0% #966b20;"></div>
		<div style="background: none repeat scroll 0% 0% #85A9B3;"></div>
		<div style="background: none repeat scroll 0% 0% #B0CB7A;"></div>
	</div>

	<footer th:replace="blog/common::footer"></footer>

	<div th:replace="blog/common::JavaScript-fragment"></div>

</body>


</html>